@charset "UTF-8";
/* index top */

.lig-top{
    height: 0.8rem;
}
.lig-nav > .nav-box{
    width: 0.590909rem;
    /* height: 0.477273rem;*/
    position: relative;
    display: inline-block;
    margin: 0 0.03rem;
    background: transparent;
}
.nav-icon{
    width: 0.363636rem;
    height: 0.363636rem;
    margin: 0.045455rem auto;
}
.nav-act{
    width: 0.590909rem;
    height: 0.113636rem;
    margin: 0 auto;
}
.active .nav-act{
    background: url("../images/act-0.png") center no-repeat;
    background-size: 100% 100%;
}
.nav-icon-0{
    background: url("../images/index.png") center no-repeat;
    background-size: 100% 100%;
}
.active .nav-icon-0{
    background: url("../images/index-1.png") center no-repeat;
    background-size: 100% 100%;
}
.nav-icon-1{
    background: url("../images/floor.png") center no-repeat;
    background-size: 100% 100%;
}
.active .nav-icon-1{
    background: url("../images/floor-1.png") center no-repeat;
    background-size: 100% 100%;
}
.nav-icon-2{
    background: url("../images/layer.png") center no-repeat;
    background-size: 100% 100%;
}
.active .nav-icon-2{
    background: url("../images/layer-1.png") center no-repeat;
    background-size: 100% 100%;
}
.nav-icon-3{
    background: url("../images/set.png") center no-repeat;
    background-size: 100% 100%;
}
.active .nav-icon-3{
    background: url("../images/set-1.png") center no-repeat;
    background-size: 100% 100%;
}

/* logo */
.lig-logo{
    background: url("../images/logo.png") center no-repeat;
    background-size: 100% 100%;
    width: 1.609091rem;
    height: 0.431818rem;
}

/* main */
.lig-cent{
    margin: 0.4rem 0;
}
.lig-tools{
    margin: 0.613636rem 0;
}
.lig-cir{
    width:1.8rem;
    height:1.8rem;
    border:1px solid #ffffff;
    border-radius: 100%;
}
.lig-infoList{
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    box-flex: 2;
    -ms-flex: 2;
    flex: 2;
    -webkit-flex: 2;
    position: relative;
    border-left: 1px solid rgba(255,255,255,0.6) ;
    padding:0 0.3rem;
}
.lig-time{
    text-align: center;
    font-size: 20px;
    color:rgba(255,255,255,0.8);
}
.lig-time>p{
    margin: 0.12rem 0;
}
.lig-hour{
    font-size:38px;
    color:rgba(255,255,255,1);
}
/**/
.lig-infoTit{
    height: 0.3rem;
    line-height: 0.3rem;
    opacity: 0.6;
    margin-bottom: 0.1rem;
}
.lig-infoTit-name{
    font-size:24px;
    margin-right: 0.2rem;
}
.lig-infoTit-line:before{
    content: "";
    position: absolute;
    left: 0;right: 0;
    top:50%;
    height: 1px;
    border-top: 1px solid #ffffff;
}
.lig-list{
    position: relative;
    height: 100%;
}

.lig-ul>li{
    padding: 0.1rem;
    background: rgba(0,0,0,0.1);
    margin: 0.06rem 0;
    line-height: 0.35rem;
    font-size: 20px;

    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */

    -moz-flex-direction: row ;
    -webkit-flex-direction: row;
    flex-direction: row;
    cursor:pointer
}
.lig-ul>li>div{
    margin: 0 0.08rem;
}
.li-icon{
    width:0.35rem;
    height: 0.35rem;
}
.floor-all{
    background: url("../images/fl-all.png") center no-repeat;
    background-size: 100% 100%;
}
.floor-one{
    background: url("../images/fl-1.png") center no-repeat;
    background-size: 100% 100%;
}
.li-model{
    width: 1rem;
    text-align: center;
    border-radius: 0.5rem;
    font-size: 16px;
}
.li-name{
    max-width: 2.6rem;

}
.li-time{
    font-size: 16px;
    color: rgba(255,255,255,0.6);
}
.li-time-icon{
    background: url("../images/time.png") center no-repeat;
    background-size: cover;
    width:0.15rem;
    height: 0.15rem;
    vertical-align: initial;
}


.m-0{
    background-color:#7D9F86;
}
.m-1{
    background-color:#7464D2;
}
.m-2{
    background-color:rgba(0,0,0,0.3);
}
.m-3{
    background-color:#A46C88;
}
/**/
.lig-ft{
    border-top: 1px solid rgba(255,255,255,0.6);
    height: 0.8rem;
}

/* building */
.lig-switch{
    height: 1.5rem
}
.lig-switch{
    padding: 0 0.8rem;
}
.switch-tit{
    font-size: 0.8em;
    opacity: 0.6;
}
.switch-list{
    display: -webkit-inline-flex; /*webkit*/
    display:inline-flex;

    -webkit-box-align: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    align-items: center;

}
.switch-btn{
    font-size: 0.7em;
    display: -webkit-inline-flex; /*webkit*/
    display:inline-flex;
    margin: 0 auto;
}
.switch-btn>li{
    width: 1.477273rem;
    height: 0.409091rem;
    line-height: 0.409091rem;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.8);
    border-radius: 0.4rem;
    margin: 0 0.15rem;
    cursor:pointer;
    position: relative;
}
.switch-btn>li.active{
    border: none;
    background-color: #8FBD42;
    color:#000000;
    box-shadow: 0 0.08rem 0 0 rgba(0,0,0,0.2);
}
.build-img{
    position: relative;
}
.build-0{
    background: url("../images/build-b.png") center no-repeat;
    background-size: 100% 100%;
    width: 7.422727rem;
    height: 3.586364rem;
}
.build-f{
    background: url("../images/build-f.png") center no-repeat;
    background-size: 100% 100%;
    width: 7.259091rem;
    height: 3.309091rem;
}




.nav-btn{
    width:0.545455rem;
    height: 0.386364rem;
    background: rgba(0,0,0,0.3) url("../images/arrow-left.png") center no-repeat;
    background-size:0.136364rem 0.136364rem;
    position: fixed;
    right: 0;
    bottom: 0.6rem;
    z-index: 999;
}
.lig-aim{
    position: fixed;
    right:0;
    width: 2.454545rem;
    top:0;bottom: 0;
    z-index: 999;
    background-color: rgba(0,0,0,0.3);
    opacity: 0;
    transform: translateX(2.5rem);
    -webkit-transform: translateX(2.5rem);
}
.aim-logo{
    height: 0.909091rem;
}
.aim-logo-icon{
    background: url("../images/logo.png") center no-repeat;
    background-size: 100% 100%;
    width: 1.609091rem;
    height: 0.431818rem;
}
.aim-close{
    height: 1rem;
    /*  box-shadow:0 -0.1rem 100px 0  rgba(255,255,255,0.1);*/
}
.aim-close-btn{
    background: rgba(0,0,0,0.4) url("../images/close.png") center no-repeat;
    background-size: 0.113636rem 0.113636rem;
    width:1.295455rem;
    height: 0.386364rem;
}
.aim-tit{
    line-height:0.3rem;
    margin-bottom: 0.15rem;
}
.aim-tit>.f-bavg:before{
    content: "";
    position: absolute;
    top:50%;
    height: 1px;
    left: 0;right: 0;
    border-top: 1px solid #ffffff;
}
.aim-tit-name{
    font-size: 0.8em;
    color:#f5cc56;
    margin: 0 0.15rem;
}
.aim-ul>li{
    padding: 0.1rem 0;
    font-size: 0.75em;
    cursor:pointer
}
.aim-ul>li>span{
    display: block;
    margin: 0 auto;
    width: 1.863636rem;
    height: 0.363636rem;
    line-height:0.363636rem;
    border: 1px solid #ffffff;
    border-radius: 0.4rem;
    text-align: center;
    cursor:pointer
}
.aim-ul>li>span>em{
    font-style: normal;
    display:inline-block;
    width: 1.1rem;
}
.aim-ul>li.active>span{
    background: #F5CC56 url("../images/lamp.png")  0.15rem center no-repeat;
    background-size:0.181818rem 0.190909rem;
    border: 0;
    color: #000000;
}

.floor-num{
    position: absolute;
    right: 0.15rem;
    top:0;
    bottom: 0;
}
.floor-ul{
    padding: 0 0.2rem;
}
.floor-ul>li{
   padding: 0.08rem 0;
}
.floor-ul>li>span{
    display: block;
    width:0.5rem;
    height: 0.5rem;
    line-height: 0.5rem;
    border: 1px solid #ffffff;
    text-align: center;
    border-radius: 100%;
    cursor:pointer;
    font-size: 0.8em;
}
.floor-ul>li.active>span{
    background-color: #53B684;
    box-shadow: 0 0.04rem 0 0 rgba(0,0,0,0.3);
    border: 0;
}


/*build floor css3 animation*/
.bounceIn {
    animation: bounceInRight .8s 0.2s ease both;
    -webkit-animation: bounceInRight 1s 0.2s ease both;
    -moz-animation: bounceInRight 1s 0.2s ease both;
  }
  @keyframes bounceInRight {
    0% {
      opacity: 0;
      transform: translateX(2.5rem);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @-webkit-keyframes bounceInRight {
    0% {
      opacity: 0;
      -webkit-transform: translateX(2.5rem);
    }
    100% {
      -webkit-transform: translateX(0);
      opacity: 0;
    }
  }
  
  .bounceOut {
    animation: bounceInLeft .8s 0.2s ease both;
  }
  @keyframes bounceInLeft {
    0% {
      opacity: 1;
      transform: translateX(0);
    }
    100% {
      opacity: 0;
      transform: translateX(2.5rem);
    }
  }
  .zoomIn {
    animation: zoomIn .8s 0.2s ease both;
  }
  @keyframes zoomIn {
    0% {
      width: 100%;
    }
    100% {
      width: 75.5%;
    }
  }
  .zoomOut {
    animation: zoomOut .8s 0.2s ease both;
  }
  @keyframes zoomOut {
    0% {
      width: 75.5%;
    }
    100% {
      width: 100%;
    }
  }